<template>
	<view>
		<view class="top3">
			<view style="height: 50px;position: relative;border-bottom: 0.5rpx #ecdede solid;">
				<input type="text" placeholder="手机号" v-model="phone" class="ren">
			</view>
			<view style="height: 60px;">
				<input type="text" placeholder="验证码" @input="onCode"
					style="border: 0.5rpx #ecdede solid;padding-left: 5rpx;float:left;width:49%;text-indent: 25px;background-color: white;padding: 20rpx 0 25rpx 0;">
				<button class="getyzm" @click="getCode()" :disabled="disabled" style="background-color: white;color: #888888;">{{captchaText}}</button>
			</view>
		</view>
		<button class="top" @click="go()">下一步</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',	//手机号
				authcode:'',//验证码
				disabled: false,
				captchaText: '获取验证码',
				miao:10,	//获取验证码等待10s后可再用,值会变
				maxtime: 10,//获取验证码总等待10s，值不变
			}
		},
		methods: {
			onCode(e){
				this.authcode = e.target.value;
			},
			getCode(){
				if(this.phone.trim().length != 11){
					this.$u.toast("抱歉，请输入正确的手机号！");
					return
				}else{
					this.$http.get('/sms/forgetPassword',{
						phone:this.phone
					}).then(res => {
						if(res.data.code==404){
							this.$u.toast("手机号码不存在！");
							return
						}else{
							this.disabled = true;
							this.miao = 10;
							var that = this;
							const fn = setInterval(function() {
								that.captchaText = that.miao + 's后再次发送';
								that.miao = that.miao - 1;
								if (that.miao == 0) {
									that.disabled = false;
									that.captchaText = "获取验证码";
									clearInterval(fn);
								}
							}, 1000);
						}
					})
				}
			},
			go(){
				if(this.phone.trim().length != 11){
					this.$u.toast("抱歉，请输入正确的手机号！");
					return
				}else{
					this.$http.get('/userinfo/checkCode',{
						code:this.authcode,
						phone:this.phone
					}).then(res => {
						if(res.data.code==500){
							this.$u.toast("验证码不正确！");
							return
						}
						uni.navigateTo({
							url:'updateUserPasswordTwo?phone='+this.phone
						})
					})
				}
			}
		}
	}
</script>

<style>
	.top3 {
		margin-top: 8%;
		width: 90%;
		/* text-align: center; */
		margin-left: 5%;
	}
	.getyzm {
		width: 50%;
	}
	.top {
		background: #EF6700;
		width: 90%;
		height: 45px;
		/* color: lightgray; */
		color: white;
		text-align: center !important;
		margin-top: 8%;
		margin-left: 5%;
		font-size: 120%;
		font-weight: bold;
		line-height: 40px;
	}
	.ren{
		border: 0.5rpx #ecdede solid;
		background-color: white;
		height: 50px;
		padding-left: 40px;
		background-image: url(../../static/center/login_name.png);
		background-size: 20px;
		background-repeat: no-repeat;
		background-position-x: 10px;
		background-position-y: 15px;
	}
</style>
